<template>
    <div class="xiang">
      <div class="xiang-cai"><i class="iconfont">&#xe602;</i><samp>猜你喜欢</samp></div>
      <ul class="xiang-tujian">
        <li v-for="i in m">
          <div class="xiang-tu-shang">
            <div class="shang-img">
              <img :src="i.img"/></div>
            <div class="shang-t1">
              <p class="t1-t1">{{i.t}}</p>
              <p class="t1-t2"><i class="iconfont">&#xe87a;&#xe87a;&#xe87a;&#xe87a;</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<samp>{{i.lun}}条评论</samp></p>
              <p class="t1-t3"><samp>￥<em>{{i.em}}</em></samp>起</p>
            </div>
            <div class="shang-t2"><samp class="s">{{i.qu}}</samp></div>
          </div>
          <div class="xiang-tu-shang2"><div style="width: 30%;display: flex"></div><samp>{{i.jian}}</samp></div>
        </li>
      </ul>
  <div class="cha">查看更多商品</div>
    </div>
</template>
<script>
    export default {
        name: 'xiangqing',
        data () {
            return {
                m:[
                  {img:"http://img1.qunarzz.com/sight/p0/1508/2e/d9363ce50a88c8c5ff5a138c67687cd4.water.jpg_200x200_1c15c8f5.jpg",t:"深圳野生动物园", lun:"19160", em:"230", qu:"南山区",jian:"这里有优雅和呆萌并存的睫毛精"},
                  {img:"http://img1.qunarzz.com/sight/p0/1502/15/15ca1d0eab6bf46c.water.jpg_200x200_50ca7bb1.jpg",t:"深圳野生动物园", lun:"19160", em:"230", qu:"南山区",jian:""},
                  {img:"http://img1.qunarzz.com/sight/p0/1507/64/34362835b4a219af8b36803d31a6380f.water.jpg_200x200_bc5c0452.jpg",t:"深圳野生动物园", lun:"19160", em:"230", qu:"南山区",jian:"友善"},
                  {img:"http://img1.qunarzz.com/sight/p0/1507/e4/a3f526c57e0115798af52929d294ddd6.water.jpg_200x200_c6bc3621.jpg",t:"深圳野生动物园", lun:"19160", em:"230", qu:"南山区",jian:"和巴萨的"},
                  {img:"http://img1.qunarzz.com/sight/p0/1802/39/39ec37884650dd97a3.img.png_200x200_580f99ac.png",t:"深圳野生动物园", lun:"19160", em:"230", qu:"南山区",jian:""},
                  {img:"http://img1.qunarzz.com/sight/p0/201307/18/f25ac054eec3804dc8d65eac.jpg_200x200_a008b6ca.jpg",t:"深圳野生动物园", lun:"19160", em:"230", qu:"南山区",jian:""},
                  {img:"http://img1.qunarzz.com/sight/p0/1510/d0/d0610302e0ae770890.water.jpg_200x200_2ce068f1.jpg",t:"深圳野生动物园", lun:"19160", em:"230", qu:"南山区",jian:""},
                  {img:"http://img1.qunarzz.com/sight/p0/1412/b5/c99be07b7b79cfb5900e03a35bc3051f.water.jpg_200x200_e839eb8e.jpg",t:"深圳野生动物园", lun:"19160", em:"230", qu:"南山区",jian:""},
                  {img:"http://img1.qunarzz.com/sight/p0/1504/25/2567e9dc989e2eb6.water.jpg_200x200_caea32c8.jpg",t:"深圳野生动物园", lun:"19160", em:"230", qu:"南山区",jian:"99999"},
                  {img:"http://img1.qunarzz.com/sight/p0/1412/6f/5d803c45af314b68f4652362fca42d11.water.jpg_200x200_42a7956b.jpg",t:"深圳野生动物园", lun:"19160", em:"230", qu:"南山区",jian:""},
                ]
            }
        },
        mounted(){
        }
    }
</script>
<style lang="stylus" scoped>
.xiang-cai{
  padding: .2rem 0 .26rem;

  i{
    color:red
    margin-left 0.08rem
  }
    samp{
      margin-left 0.04rem
      font-weight 600
    }
}
  .xiang-tujian{
    margin-left 0.08rem
    position relative
    li{
      border-bottom   1px solid #F0F0F0
      position relative
    }
  }
.xiang-tu-shang{
  display flex
  .shang-img{
    width 30%
    img{
      width 100%
      margin-top 0.05rem
    }
  }
    .shang-t1{
      margin-left 0.1rem
      flex-grow:1;
      margin-top 0.12rem
      display flex
      flex-direction column
      p{
        margin 0.05rem 0
      }
      .t1-t1{
        font-size 0.2rem
        flex-grow:2;
      }
        .t1-t2{
          flex-grow:1;
          font-size 0.1rem
          display flex

          i{
            color #ff9209
          }
        }
          .t1-t3{
            flex-grow:1;
            samp{
              color chocolate
              em{
                font-size 0.3rem
              }
            }
          }
    }
    .shang-t2{
      display flex
      flex-grow 1
      bottom 0.5rem
      right  0.1rem
      position absolute
      /*margin-right 0.12rem*/
      /*margin-top 0.8rem*/
    }
}
  .xiang-tu-shang2{
    opacity 0.5
    margin-top  0.01rem
    text-align left
    margin-right 0.12rem
    display flex
    margin-bottom 0.09rem
    samp{
      color red
      background #ff340e
    }
  }
  .cha{
    padding 0.12rem 0
    text-align center
  }
</style>
